

var rotate = 0;

var random = function(num) {
    return Math.random() * num;
    
};

var randomColor = function() {
    return 'rgb(' + random(250) + ', ' + random(250) + ', ' + random(250) + ')';
};

var list = new Array(12).fill(0).map(function(o, i) {
    return {
        title: '幸运参与者' + (i + 1),
        color: randomColor()
    };
});

var perAngle = 360 / list.length;

var main = document.querySelector('.main');
var temp = document.querySelector('#temp');

for (var i in list) {
    var item = list[i];

    var newNode = temp.cloneNode(true);
    newNode.style.display = 'block';
    newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';
    newNode.querySelector('.bg').style.background = item.color;

    if (list.length > 2) {
        var p = this.perAngle / 2; // 每份的角度两等分
        var d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度
        var x = (100 - d) / 2; // 每份对边实际百分比
        newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;
    }

    newNode.querySelector('.title').innerHTML = item.title;

    main.appendChild(newNode);
}

var isRunning = false;

function start() {
    if (isRunning) {
        console.warn('isRunning');
        return;
    }

    isRunning = true;

    document.querySelector('.winner').innerHTML = '';

    rotate += random(360) + 360 * 3; // 多转3圈

    main.style.transform = 'rotateZ(-' + rotate + 'deg)';
}

function end() {
    isRunning = false;

    console.log(rotate);
    var index = Math.floor(rotate / perAngle) % list.length;
    var winner = list[index];
    var displayBox = document.getElementById('winnerDisplay');
    winnerName.innerHTML = winner.title;;
    displayBox.style.display = 'block';
}
